$imgurl-base: "../../newimages/mall";
$gray: #c9caca;
$light-gray: #f5f5f5;
$black: #595757;
$light-black: #9fa0a0;
$red: #ff4739;
$blue: #1a58c8;
%inline-block{
	display:inline-block;
	*display:inline;
	*zoom:1;
}
%block-100{
	display:block;
	width:100%;
	height:100%;
}
.wrapper{
	width:1170px;
	margin: 0 auto;
}
body{
	color:$black;
}	
a{
	color:$black;
	text-decoration: none;
}
a:hover{
	text-decoration: underline;
}
.bread{
	padding:26px 0 20px 0;
	color:$black;
	font-size:14px;
	a{
		color:$black;
	}
	span {
	  font-family: simsun;
	  font-style: normal;
	}
}

.prd-main{
	margin-bottom:30px;
	.preview{
		float:left;
		display: inline;
		width:420px;
		.share-favor{
			height: 30px;
			margin-top:15px;
			color:$light-black;
			font-size: 14px;
			a{
				@extend %block-100;
				text-decoration: none;
			}
		}
		%share-favor{
			height: 30px;
			line-height: 31px;
			@extend %inline-block;
		}
		.share{
			@extend %share-favor;
			background:url(#{$imgurl-base}/i/icon-share.png) no-repeat 0 center;
			text-indent:30px;
		}
		.favor{
			@extend %share-favor;
			background:url(#{$imgurl-base}/i/icon-star.png) no-repeat 0 center;
			text-indent:24px;
			margin-left:40px;
		}
	}
	.photos{
		%width-height{
			width:420px;
			height: 390px;
		}
		li{
			width:420px;
			height: 390px;
			display: none;
			&.cur{
				display: block;
			}
		}
		img{
			@extend %width-height;
			vertical-align: top;
		}
	}
	.tabs{		
		margin:12px 0 0 -6px;
		%width-height{
			width:77px;
			height: 77px;
		}	
		li{			
			@extend %width-height;
			border:1px solid $gray;
			@extend %width-height;
			&.cur{
				border-color:$red;
			}
			margin-left:6px;
  			float: left;
  			display: inline;
		}
		img{
			@extend %width-height;
			vertical-align: top;
		}
	}
	.pdt-info{
		width:510px;
		margin-left:20px;
		display: inline;
		float:left;
		h1{
			font-weight: bold;
			font-size: 16px;
			line-height: 24px;
		}
		.price-comment{
			background:url(#{$imgurl-base}/prd-price-bg.jpg);
			width:509px;
			height: 78px;
			margin: 8px 0 24px 0;
			font-size: 14px;
			color:$light-black;
		}
		.price-box{
			padding:12px 0 0 15px;
			float: left;
			width: 300px;
			display: inline;
		}
		%common-price{
			@extend %inline-block;
			margin-left:12px;
		}
		.old-price{
			text-decoration: line-through;
			@extend %common-price;
			color:$black;
			font-size: 18px;
			padding-bottom:10px;
		}
		.price{
			@extend %common-price;
			color:$red;
			font-weight: bold;
			font-size: 30px;
			em{
				font-weight: normal;
				font-size: 20px;
			}
		}
		.comment-box{
			margin-top: 5px;
			border-left:1px solid $gray;
			width: 100px;
			height: 68px;
			float: right;
			display: inline;
			vertical-align: middle;
			text-align: center;
			span{
				@extend %inline-block;
				vertical-align: middle;
			}
			.cmt-tit{
				padding-top:16px;
				color:$light-black;
			}
			.cmt-count{
				padding-top:8px;
				color:$red;
			}
		}
		.choose-box{
			margin-bottom: 18px;
			position:relative;
			dt{
				color:$light-black;
				padding: 7px 0 0 16px;
				position:absolute;
			}
			dd{
				padding-left:96px;
			}
			li{
				  border: 1px solid $gray;
				  text-align: center;
				  line-height: 16px;
				  margin: 0 10px 4px 0;
				  cursor: pointer;
				  display: inline;
				  position: relative;
				  padding: 5px 10px;
				  float: left;
				  i{
					background:url(#{$imgurl-base}/i/icon-tab-bottom.png);
					width: 9px;
					height: 9px;
					position: absolute;
					display: block;
					visibility: hidden;
					bottom: 0;
					right: 0;
				  }
				  &.cur{
				  	padding: 4px 10px;
  					border: 2px solid $red;
  					i{
  						visibility: visible;
  					}
				  }
			}
		}

		.choose-btns{
			padding-left:16px;
			a{
				text-decoration: none;
			}
			.choose-amount{
				float: left;
				display: inline;
				width: 67px;
				height: 47px;
				overflow: hidden;
				border: 1px solid #ccc;
				position: relative;
				margin: 8px 4px 0 0;
				a {
					display: block;
					width: 23px;
					text-align: center;
					height: 23px;
					line-height: 23px;
					overflow: hidden;
					background: #f1f1f1;
					color: #666;
					position: absolute;
					right: -1px;
					border: 1px solid #ccc;
					&.btn-reduce {
						bottom: -1px;
					}
					&.btn-add {
						top: -1px;
					}

				}
				input {
					display: block;
					width: 43px;
					height: 47px;
					line-height: 47px;
					position: absolute;
					top: 0;
					left: 0;
					border: none;
					border: 0;
					text-align: center;
				}
			}
			.btn {
				float: left;
				display: inline;
				line-height: 49px;
				height: 49px;
				background:$red;
				margin-top: 8px;
				border-radius:3px;
				a {
					position: relative;
					display: block;
					height: 100%;
					padding:0 20px 0 65px;
					text-align: center;
					color: #fff;
					font-size: 22px;
					font-weight: bold;
					overflow: hidden;
				}
				i{
					display: block;
					position:absolute;
					left:14px;
					top:12px;
					width:31px;
					height: 28px;					
					background:url(#{$imgurl-base}/i/icon-btn-cart.png);
				}
			}
			.btn-append {
				width: 137px;
				height: 38px;
			}
		}
	}

	.groom-box{
		font-size: 14px;
		float: right;
		display: inline;
		width:183px;
		padding-left:18px;
		border-left:1px dashed $red;
		a{
			@extend %block-100;
		}
		ul{
			margin-top:-30px;
		}
		img{
			width: 181px;
			height:216px;
			border:1px solid $gray;
		}
		li{
			margin-top:30px;
		}
		.groom-tit{
			margin-top:15px;
			span{
				color:$red;
				float:right;
			}
		}
	}
}


.pdt-dt{
	padding-bottom:30px;
	.pdt-dt-l{
		width:188px;
		float: left;
		display: inline;
		font-size: 12px;
		line-height: 32px;
		border:1px solid $gray;
		dl{
			border-top:1px solid $gray;
			padding:0 15px;
		}
		dt{
			height: 32px;
			position:relative;
			i{
				position: absolute;
				top:12px;
				right:0;
				display: block;
				vertical-align: middle;
				width:9px;
				height: 9px;
				background:url(#{$imgurl-base}/i/icon-tree-show.png) no-repeat;
			}			
			&.in{
				i{
					background:url(#{$imgurl-base}/i/icon-tree-hide.png) no-repeat;
				}
			}
		}
		dd{

		}
		li{
			height: 32px;
			background:url(#{$imgurl-base}/i/icon-li.png) no-repeat 0 center;
			padding-left:9px;
		}
	}
	.pdt-tit{
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		height: 32px;
		background:#fafafa url(#{$imgurl-base}/i/icon-tree-title.png) no-repeat 9px center;
	}
	.pdt-dt-r{
		width:950px;
		float:left;
		margin-left: 16px;
		.warning{
			font-size: 12px;
			height:30px;
			line-height: 30px;
			background:url(#{$imgurl-base}/i/icon-warn.png) no-repeat 0 center;
			padding-left:24px;
		}
	}
	.pdt-content{
		font-size: 14px;
		padding-left:30px;
		line-height: 24px;
		img{
			max-width: 100%;
		}
	}
}